<template>
  <view>
    <view class="cu-bar search fixed box-shadowe">
      <view class="action">

        <picker @change="PickerChange" :value="index" :range="citys">
          <view class="picker">
            {{ index > -1 ? citys[index] : city||'南通' }}
            <text class="cuIcon-triangledownfill"></text>
          </view>
        </picker>

        <!--        <text class="padding-right-sm">南通</text>-->
        <!--        <text class="cuIcon-triangledownfill"></text>-->
      </view>
      <view class="search-form border-16">
        <text class="cuIcon-search"></text>
        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false"
               type="text" placeholder="搜索订单信息" confirm-type="search"/>
      </view>
      <view class="cu-avatar cuIcon-scan round bg-white" @tap.stop="scade"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {updateCity} from "@/common/api/user";
import {useStore} from "@/common/store";

const store = useStore();
const userId = computed(() => store.userId)
const city = computed(() => store.city)

const citys = ref(['南通', '无锡', '徐州', '连云港', '盐城',"上海"]);
const index = ref(0);

const PickerChange = (e) => {
  index.value = e.detail.value
  if (citys.value[index.value] != city.value) {
    updateCity({
      id: userId.value,
      city: citys.value[index.value]
    }).then(res => {
      store.$patch({
        city: citys.value[index.value]
      })
    })
  }
}

const scade = () =>{
  // 允许从相机和相册扫码
  uni.scanCode({
    success: function (res) {
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);
    }
  });
}
const InputBlur = () => {

}

const InputFocus = () => {

}
</script>

<style lang="scss" scoped>
.search {
  background-color: #fff;
}

.box-shadowe {
  box-shadow: 0 0rpx 0rpx;
}

.border-16 {
  border-radius: 16rpx;
  margin: 0 2rpx;
}
</style>
